<template>
  <div class="wrapper">
    <el-form class="ur-form " :inline="true" ref="switchForm" style="height: 55px;">
      <el-form-item label="时间" class="ml-1">
        <el-date-picker v-model="times" type="daterange" align="right" unlink-panels range-separator="至" size="small"
                        start-placeholder="开始日期" end-placeholder="结束日期" style="width: 235px;" value-format="yyyy-MM-dd"> </el-date-picker>
        <el-input placeholder="请输入内容" v-model="form.content" size="small" class="input-with-select w300 ml-1">
          <el-select v-model="searchType"  slot="prepend" size="small" placeholder="请选择" class="w110 ur-select">
            <el-option label="工单流水" :value="1"></el-option>
            <el-option label="工单内容" :value="2"></el-option>
            <el-option label="工单号码" :value="3"></el-option>
            <el-option label="责任区" :value="4"></el-option>
            <el-option label="创建人" :value="5"></el-option>
            <el-option label="处理人" :value="6"></el-option>
          </el-select>
<!--           v-if="limits.indexOf('3_01_02_01')!=-1"-->
          <el-button slot="append"  class="ur-btn ur-btn-primary" @click="queryWork"><i class="iconfont icon-search"></i>查询</el-button>
        </el-input>
<!--        v-if="limits.indexOf('3_01_02_02')!=-1"-->
        <el-button  class="ur-btn ur-btn-primary ml-0 vertical-m" @click="exportWork"><i class="iconfont icon-dowload"></i>导出工单</el-button>
      </el-form-item>
    </el-form>
    <!--表格-->
    <el-table class="ur-table" ref="tableDom1" :data="getGidData" style="width: 100%" :height="clientHeight-202" highlight-current-row @row-click="rowClick">
      <el-table-column align="center" type="index" :index="indexMethod" label="序号" width="50"></el-table-column>
      <el-table-column v-for="(v,index) in tables.columns" :prop="v.field" :label="v.title" :width="v.width" align="center" :key="index">
        <template slot-scope="scope">
          <!--工单状态-->
          <span v-if="v.field=='status'">{{global.WorkStatus[scope.row[v.field]+1]}}</span>
          <!--工单分类-->
          <span v-else-if="v.field=='Classify'">{{global.WorkTypes[scope.row[v.field]]}}</span>
          <!--级别-->
          <label v-else-if="v.field=='Level'">
            <span class="d-flex align-items-center" v-if="scope.row[v.field]==1"><i class="circle error"></i>紧急</span>
            <span class="d-flex align-items-center" v-else-if="scope.row[v.field]==2"><i class="circle warning"></i>次紧急</span>
            <span class="d-flex align-items-center" v-else="scope.row[v.field]==3"><i class="circle bg-info"></i>普通</span>
          </label>
          <!--信息来源WorkSources-->
          <span v-else-if="v.field=='Source'">
             <template v-for="item in global.FaultSources" v-if="scope.row[v.field]==item.no">{{item.name}}</template>
          </span>
          <!--开始时间 结束时间-->
          <span v-else-if="v.field.indexOf('Time')!=-1||v.field=='Created'">{{scope.row[v.field]?formatDate(new Date(scope.row[v.field]),'yyyy-MM-dd HH:mm:ss'):''}}</span>
          <!--其他-->
          <span v-else>{{scope.row[v.field]}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="90">
        <template slot="header" slot-scope="scope">
          <label>更多详情</label>
        </template>
        <template slot-scope="scope">
          <el-button class="ur-btn ur-btn-primary"  @click="workInfo(scope.row)">
            <i class="iconfont icon-xianshi"></i>查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div class="mt-3">
      <el-pagination class="float-right " @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     layout="total, sizes, prev, pager, next, jumper" :page-sizes="[100,200,500,1000]"
                     :current-page="currentPage" :page-size="pageSize" :total="total"></el-pagination>
    </div>
    <!--更多详情-->
    <el-dialog class="ur-form-dialog"  v-el-drag-dialog title="更多详情" :visible.sync="showWorkInfo" width="1300px"  @close="showWorkInfo=false">
      <template v-if="showWorkInfo">
<!--        <work-info :work="workSel" @workInfoDialog="workInfoDialog($event)"></work-info>-->
        <work-deal :work="workSel" :page="'history'" @receiptDialog="receiptDialog($event)"></work-deal>
      </template>
    </el-dialog>
    <!--查看回执详情-->
    <el-dialog  class="ur-form-dialog" v-el-drag-dialog title="更多详情" :visible.sync="showReceipt" width="820px" @close="showReceipt=false">
      <template v-if="showReceipt">
        <receipt-add :work="workSel" :receipt="receipt"  :isAdd="false"  @receiptDialog="receiptDialog($event)"></receipt-add>
      </template>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
  import {mapState} from 'vuex'
  import api from 'api/api'
  import fetch from 'api/fetch'
  import receiptAdd from './receipt-add'
  import workDeal from './work-deal'
  import elDragDialog from 'directive/el-dragDialog'

  export default {
    directives:{elDragDialog},
    components: {workDeal,receiptAdd},
    props: {},
    data() {
      return {
        total: 0,
        currentPage: 1,
        pageSize:100,
        searchType:1,
        searchTxt:'',
        tables: {
          sel: null,//选中行
          columns: [
            {field: "No", title: "工单流水", width: '120'},
            {field: "Level", title: "级别", width: '70'},
            // {field: "WorkOrderState", title: "工单状态", width: null},
            {field: "Classify", title: "工单分类", width: '80'},
            {field: "DevNo", title: "设施编号", width: '80'},
            {field: "AreaName", title: "责任区", width: null},
            {field: "Source", title: "信息来源", width: '100'},
            {field: "Content", title: "工单内容", width: '400'},
            {field: "Creator", title: "创建人", width: null},
            {field: "AssignedUserName", title: "处理人", width: '90'},
            {field: "StartTime", title: "开始时间", width: '150'},
            {field: "EndTime", title: "截止时间", width:'150'},
            {field: "CompletedTime", title: "完成日期", width: '150'}
          ],
          data: []
        },
        sels:[],
        form:{content:''},
        workSel:{},
        times:'',
        showWorkInfo:false,
        showReceipt:false,
        receipt:{}
      }
    },
    watch: {},
    computed: {
      getGidData() {
        return this.tables.data.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
      },
      ... mapState({
        clientHeight: state => state.comm.clientHeight,
        clientWidth: state => state.comm.clientWidth,
        userType:state=>state.user.userInfo.userType,
        limits:state=>state.user.userInfo.limits
      }),
    },
    methods: {
      exportWork(){
        let data = {qType: this.searchType, content: this.form.content}
        if (this.times) {
          data = Object.assign(data, {sdate: this.times[0], edate: this.times[1]})
        }
        api.fetchFile('/SHWorkorder/QCompleteWorks_Export',data)
            .then(r => {
              fetch.saveFile(r,'历史工单',this.times)
            })
      },
      indexMethod(index) {
        return index + 1
      },
      formatDate(value,type){
        return api.formatDate(value,type)
      },
      handleSizeChange(val) {
        this.pageSize = val
      },
      handleCurrentChange(val) {
        this.currentPage = val
      },
      rowClick(row, event, column){},
      //更多详情
      workInfo(row){
        this.workSel=row
        this.showWorkInfo=true
      },
      receiptDialog(v){
        this.showReceipt=v.showReceipt
        this.showWorkInfo=v.showWorkDeal
        this.receipt=v.receipt
      },
      queryWork(){
        this.currentPage=1
        this.handleCurrentChange(1)
        let data = {qType: this.searchType, content: this.form.content}
        if (this.times) {
          data = Object.assign(data, {sdate: this.times[0], edate: this.times[1]})
        }
        api.fetchSimple('/SHWorkorder/QCompleteWorks',data)
            .then(r => {
              this.tables.data = r
              this.total = r.length
            })
      },
    },
    created() {
      this.queryWork()
    },
    mounted() {
    }
  }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
</style>
